<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //html文档加载完毕后执行
        window.onload = function () {
            //获取需要的对象
            var username = document.querySelector("#username");
            var password = document.querySelector("#password");
            var email = document.querySelector("#email");



            //当表单提交时验证是否符合规则
            document.querySelector("#form").onsubmit = function () {
                //检验每个输入框的值是否符合要求

                //用户名 函数 =true  &&   密码 函数 =true   邮箱 函数 = true
                return checkUserName() && chenckPassWord() && checkEmail();
            }


            //鼠标移开某一个输入框时也要验证是否通过
            username.onblur = checkUserName; //知识需要函数名 不要括号
            password.onblur = chenckPassWord;
            email.onblur = checkEmail;

            //验证用户名函数
            function checkUserName() {
                //1.获取username的value值
                var userNameVal = username.value.trim();
                var msg = document.querySelector("#uname");

                //非空验证
                if (userNameVal.length == 0 || userNameVal == "") {
                    //提示文字
                    msg.innerHTML = "不好意思，用户名不能为空！"
                    msg.style.color = "red";
                    return false; //检验失败
                }

                //合理长度
                if (userNameVal.length < 6 || userNameVal.length > 12) {
                    //提示文字
                    msg.innerHTML = "不好意思，用户名必须在6-12位之间！"
                    msg.style.color = "red";
                    return false; //检验失败
                }

                //都没有进入上面的验证失败 正常
                msg.innerHTML = "符合规则";
                msg.style.color = "green";
                return true;
            }

            //验证密码函数
            function chenckPassWord() {
                msg = document.querySelector("#upass");
                //密码长度>=4位
                var passwordVal = password.value.trim();

                if (passwordVal.length < 4) {
                    msg.innerHTML = "密码不能小于4位！";
                    msg.style.color = "red";
                    return false;
                }

                msg.innerHTML = "符合规则";
                msg.style.color = "green";
                return true;

            }

            //验证邮箱的函数
            function checkEmail() {
                var emialVal = email.value.trim();
                msg = document.querySelector("#uemail");

                //非空
                if(emialVal.length == 0 || emialVal == ""){
                    msg.innerHTML = "邮箱不能为空";
                    msg.style.color = "red";
                    return false;
                }

                //包含@
                if(emialVal.indexOf("@") == -1){
                    msg.innerHTML = "邮箱必须包含@";
                    msg.style.color = "red";
                    return false;
                }

                //包含.
                if(emialVal.indexOf(".") == -1){
                    msg.innerHTML = "邮箱必须包含.";
                    msg.style.color = "red";
                    return false;
                }

                //@要在.前面
                if(emialVal.indexOf("@") > emialVal.indexOf(".")){
                    msg.innerHTML = "邮箱@需在.前面";
                    msg.style.color = "red";
                    return false;
                }


                msg.innerHTML = "符合规则";
                msg.style.color = "green";
                return true;

            }




        }
    </script>
</head>

<body>
    <!-- 定义表单 -->
    <form id="form" action="#" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="username" id="username" placeholder="请输入用户名...">
                </td>
                <td><span id="uname">(*请输入您的用户名)</span></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" name="password" id="password" placeholder="请输入密码...">
                </td>
                <td><span id="upass">(*请输入您的密码)</span></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td>
                    <input type="text" name="email" id="email" placeholder="请输入邮箱...">
                </td>
                <td><span id="uemail">(*请输入您的邮箱)</span></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="注册">
                    <input type="reset" value="重置">
                </td>

            </tr>
        </table>

    </form>

</body>

</html>